<!DOCTYPE html>
<html lang="en"> 
<head>
<meta charset="UTF-8">
     <link rel="shortcut icon"href="https://pic.baike.soso.com/ugc/baikepic2/7330/20160726230436-313769386.jpg/0"><title>残联工作平台</title>
</head>
<body>
<script> 
    var ogg = "1.ogg";
        var ogg = new Audio(ogg);
                        ogg.play(); //播放ogg这个音频对象
</script>
</body>
<body>
<audio id="audio"  src="1.mp3" autoplay>
    <source src="1.mp3" type="audio/mpeg">
</audio>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    var audio = document.querySelector('#audio');
    //safari和微信
    document.addEventListener("touchstart", function () {
       audio.play();
    }, false);
</script>

</body>

<body> 
<head>   
	<style>
        * {
            margin: 0;
            padding: 0;
        }
         
        html {
            height: 100%;
            width: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
			opacity: 0.8;
            background: linear-gradient(to bottom right,#CCFF66, #33FFFF);
            background: -webkit-linear-gradient(to bottom right,#CCFF66,#33FFFF);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            -moz-background-size: 100% 100%;
        }
         
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
         
        #loginDiv {
            width: 75%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 600px;
			background: url(https://pic.baike.soso.com/ugc/baikepic2/7330/20160726230436-313769386.jpg/0) no-repeat center 15px;
            background-color: rgba(5, 100, 200, 0.3);
			background-size:80px 80px;
            box-shadow: 7px 0px 10px rgba(62, 56, 66, 0.5);
            border-radius: 800px;
        }
         
        #name_trip {
            margin-left: 50px;
            color: red;
        }
         
        p {
            margin-top: 30px;
            margin-left: 20px;
            color: azure;
        }
         
        input {
            margin-left: 15px;
            border-radius: 5px;
            border-style: hidden;
            height: 20px;
            width: 130px;
            background-color: rgba(116, 151, 116, 10);
            outline: none;
            color: #f0edf3;
            padding-left: 10px;
        }
         
        .button {
            border-color: cornsilk;
            background-color: rgba(150, 109, 237, 0.7);
            color: aliceblue;
            border-style: hidde;
            border-radius: 30px;
            width: 350px;
            height: 60px;
            font-size: 35px;
        }
		.wrap ul li {
            list-style-type: none;
            display: block;
            position: absolute;
            bottom: -120px;
            width: 15px;
            height: 15px;
            z-index: -8;
            border-radius: 50%;
            background-color:rgba(225, 205, 255, 100.105);
            animotion: square 25s infinite;
            -webkit-animation: square 25s infinite;
        }
        .wrap ul li:nth-child(1) {
            left: 0;
            animation-duration: 10s;
            -moz-animation-duration: 10s;
            -o-animation-duration: 10s;
            -webkit-animation-duration: 10s;
        }
        .wrap ul li:nth-child(2) {
            width: 40px;
            height: 40px;
            left: 10%;
            animation-duration: 15s;
            -moz-animation-duration: 15s;
            -o-animation-duration: 15s;
            -webkit-animation-duration: 11s;
        }
        .wrap ul li:nth-child(3) {
            left: 20%;
            width: 25px;
            height: 25px;
            animation-duration: 12s;
            -moz-animation-duration: 12s;
            -o-animation-duration: 12s;
            -webkit-animation-duration: 12s;
        }
        .wrap ul li:nth-child(4) {
            width: 50px;
            height: 50px;
		    color:#2250ED;
            left: 30%;
            -webkit-animation-delay: 3s;
            -moz-animation-delay: 3s;
            -o-animation-delay: 3s;
            animation-delay: 3s;
            animation-duration: 12s;
            -moz-animation-duration: 12s;
            -o-animation-duration: 12s;
            -webkit-animation-duration: 12s;
        }
        .wrap ul li:nth-child(5) {
            width: 60px;
            height: 60px;
		    color:#DA2AE6;
            left: 40%;
            animation-duration: 10s;
            -moz-animation-duration: 10s;
            -o-animation-duration: 10s;
            -webkit-animation-duration: 10s;
        }
        .wrap ul li:nth-child(6) {
            width: 75px;
            height: 75px;
		    color:#EF8721;
            left: 50%;
            -webkit-animation-delay: 7s;
            -moz-animation-delay: 7s;
            -o-animation-delay: 7s;
            animation-delay: 7s;
        }
        .wrap ul li:nth-child(7) {
            left: 60%;
            width: 30px;
            height: 30px;
            animation-duration: 8s;
            -moz-animation-duration: 8s;
            -o-animation-duration: 8s;
            -webkit-animation-duration: 8s;
        }
        .wrap ul li:nth-child(8) {
            width: 90px;
            height: 90px;.
            left: 70%;
            -webkit-animation-delay: 4s;
            -moz-animation-delay: 4s;
            -o-animation-delay: 4s;
            animation-delay: 4s;
        }
        .wrap ul li:nth-child(9) {
            width: 50px;
            height: 50px;
            left: 80%;
            animation-duration: 20s;
            -moz-animation-duration: 20s;
            -o-animation-duration: 20s;
            -webkit-animation-duration: 20s;
        }
        .wrap ul li:nth-child(10) {
            width: 125px;
            height: 125px;
            left: 90%;
			background: url(http://www.1203.org/r/cms/www/fjscl/images/wx_scl.gif) no-repeat center 15px;
            -webkit-animation-delay: 6s;
            -moz-animation-delay: 6s;
            -o-animation-delay: 6s;
            animation-delay: 6s;
            animation-duration: 30s;
            -moz-animation-duration: 30s;
            -o-animation-duration: 30s;
            -webkit-animation-duration: 30s;
        }
        @keyframes square {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
            100% {
                bottom: 400px;
                -webkit-transform: translateY(-500);
                transform: translateY(-500)
            }
        }
        @-webkit-keyframes square {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
            100% {
                bottom: 400px;
                -webkit-transform: translateY(-500);
                transform: translateY(-500)
        }
				
    </style>
</head>
</body>
    <div id="loginDiv">
	<div class="wrap">
    <div class="container">	
	<div>
    <div>
    <div>
	    <h1 style="text-align: center;font-size:width:40px;height:80px;color: aliceblue;color: #6600FF;">荔城区残联工作平台</h1>
    </div> 
	<div>
	<!-- 天气 -->
       <script type="text/javascript">
    WIDGET = {FID: 'Hjv8slQ3A5'}
</script>
<script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111"></script>
    </div>
<form action="http://baidu.com/s" method="get">
    <div>
        <label for="search"></label>
        <input style="width: 320px;height:30px;" name="wd" id="search" value="残联"value=""value=""--><button style="width: 80px;height:30px;align-items: center;border-radius:12px;background-color:#3365DC;">搜索一下</button>
    </div>
    <div>
    </div>
</form>
   <div></div>
<head>
    <meta  http-equiv="Content-Type"content="text/html;charset=utf-8";/>   
</head>      
     <div style="text-align: center;margin-top:10px;">
<body>
    <script>
        Date.prototype.format = function (fmt) {
            var o = {
                "y+": this.getFullYear, //年
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds() //秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
        setInterval("document.getElementById('dateTime').innerHTML = (new Date()).format('yyyy-MM-dd hh:mm:ss');", 1000);
    </script> 
    <div id="dateTime"style="font-size: 25px;color:#FF0000;"></div>
</body>
            <div class="button" style="width: 440px;cursor: pointer;" onclick="alert">
			<a href="https://service.cdpf.org.cn/taiji/app/zclPassport/module/login/xzsp.main.jsp"style="text-decoration:none">中国残疾人服务平台</a>
            <div class="button" style="width: 440px;cursor: pointer;" onclick="alert">
		    <a href="https://server.1203.org:8443/dpcas/login?service=http://hx.1203.org:8080/dpboss/lP0Sc3dUBfOGnQfjogin.jsp"style="text-decoration:none">福建省海西助残</a><div class="button" style="width: 440px;cursor: pointer;" onclick="alert">
			<a href="http://dpf.1203.org:81/"style="text-decoration:none">福建省无障碍平台</a>
			<div class="button" style="width: 440px;cursor: pointer;" onclick="alert">
			<a href="http://dai.dpf.1203.org:81/agent_login.html"style="text-decoration:none">福建省残疾人辅具平台</a>
            </div>
        </div>
    </div>
    </div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li>康复</li>
        <li>就业</li>
        <li>宣教</li>
        <li></li>
        <li>维权</li>
        <li></li>
        <li></li>
    </ul>
</div>
</html>